<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../case/case.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
  <script src="/jq/jquery-3.7.1.js"></script>
</head>

<body>
  <div class="box">
    <div class="index__header">
      <div class="index__header__logo">
        <img src="/image/loge.png" alt="" srcset="">
      </div>
      <div class="index__header__phone">
        <div class="index__header__phone__img">
          <img src="/image/phone.png" alt="" srcset="">
        </div>
        <div class="index__header__phone__text">
          咨询我们：12345678900
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <div class="nav1">
        <div class="nav__item"><a href="../index/index.html">首页</a></div>
        <div class="nav__item"><a href="../wzkf/wf.html">网站开发</a></div>
        <div class="nav__item"><a href="../rj/app.html">APP开发</a></div>
        <div class="nav__item"><a href="../xcx/xc.html">小程序开发</a></div>
        <div class="nav__item"><a href="../case/case.html">案例</a></div>
        <div class="nav__item"><a href="../about/about.html">关于我们</a></div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
      </div>
    </div>
    <!-- 案例 -->
    <div class="box1">
      <div class="tabbox">
        <div id="tabNav">
          <div class="active">APP/小程序 开发</div>
          <div>网站开发</div>
        </div>
        <div class="content">
          <div class="active">
            <div class="taball">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap1.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap2.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap3.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap1.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap2.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap3.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap1.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap2.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/ap3.png" alt=""></a>
                  </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="taball">
              123
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-content">
        <div class="foot-top">
          <div class="foot-left">
            <div class="left1">山东柏瑞设计有限公司</div>
            <div class="left1">联系电话：12345678900</div>
            <div class="left1">地址：济南创新谷2号楼孵化器五楼（长清区海棠路与芙蓉路交叉路口东南）</div>
          </div>
          <div class="foot-right">
            <div class="foot-img">
              <img src="../image/二维码.png" alt="">
            </div>
            <div class="foot-font">微信公众号</div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        Shandong Bairui Software Technology Co, Ltd. 山东柏瑞软件科技有限公司版权所有 鲁ICP备17006298号-1
      </div>
    </div>

    <script>
      var swiper = new Swiper(".mySwiper", {
        // autoplay: {
        //   delay: 20000
        // },
        loop: true
      });

      var swiper1 = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        slidesPerColumn: 2,
        paginationClickable: true,
        spaceBetween: 30
      });

    </script>
    <!-- 选项卡切换 -->
    <script>
      $(function () {
        $(".tabbox div").click(function () {
          //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
          $(this).addClass("active").siblings().removeClass("active");
          //获取选中元素的下标
          var index = $(this).index();
          console.log($(this));
          $(this)
            .parent()
            .siblings()
            .children()
            .eq(index)
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
      });
    </script>
  </div>
</body>

</html>